<template>
    <el-row  >
        <el-col  :lg='{span:18,offset:2}'>
            <!-- 审批信息 -->
            <el-tabs>
                <el-tab-pane label="审批信息" name="first"></el-tab-pane>
            </el-tabs>
            <el-form  label-width="100px" align='left'  ref="formdata" :model='formdata'  >
                <el-form-item label="审批名称：" >
                    <router-link  v-if='type<3' :to="{path:'/project/Detail',query:{code:formdata.prjCode}}"  ><span  class='color-blue  text-underline'>{{formdata.reqName}}</span></router-link>
                    <router-link  v-else :to="{path:'/product/detail',query:{code:formdata.prdCode}}"  ><span  class='color-blue  text-underline'>{{formdata.reqName}}</span></router-link>
                </el-form-item>
                <el-form-item label="项目类型：" >
                    <span  v-if='type == 1 || type == 2'>{{formdata.prjType |  project_type}}</span>
                    <span  v-if='type == 3 || type == 4'>{{formdata.prdType | project_type}}</span>
                </el-form-item>
                <el-form-item label="发行人：" >
                    <span  v-if='formdata.issuerName!=null'>{{formdata.issuerName}}</span>
                    <span  v-else>暂无</span>
                </el-form-item>
                <el-form-item label="申请概述：">
                  <span  v-if='formdata.reqDescription != null'> {{formdata.reqDescription}}</span>
                  <span  v-else>暂无</span>
                </el-form-item>
                <el-form-item label="审批文件：" class='mb0'></el-form-item>
                <el-form-item label-width='20px'>
                      <el-table
                        :data="history_file"
                        header-row-class-name='bankheader' 
                        style="width: 100%">
                          <el-table-column  prop="name" label="文件名称"  align='center'></el-table-column>
                          <el-table-column   label="操作" align='center'>
                              <template v-slot="list">
                                  <el-button  type="primary" size="mini" round  @click="checkWord(list.row)">预览</el-button>
                                  <el-button  type="primary" size="mini" round  @click="downloadFile(list.row.fileCode)">下载</el-button>
                              </template>
                          </el-table-column>
                      </el-table>
                </el-form-item>
                <el-form-item label="经办人：" >
                        {{formdata.createUserName}}
                </el-form-item>
                <el-form-item label="审批流程："></el-form-item>
                <el-form-item label-width='10px'>
                        <img  :src='imgsrc'  class='w-100  fada'  alt='审批流程图' id="image">
                </el-form-item>
                <el-form-item label="审批历史：" ></el-form-item>
                <el-form-item label-width='20px'>
                    <el-tabs tab-position="top"  v-model="activeName"  @tab-click="handleClick" >
                        <el-tab-pane label="项目立项"  name='first'></el-tab-pane>
                        <el-tab-pane label="项目过会"  name='second' v-if='type >= 2' ></el-tab-pane>
                        <el-tab-pane label="协议用印"  name='third' v-if='type >= 3'></el-tab-pane>
                        <el-tab-pane label="项目发行"  name='fourth'  v-if='type == 4'></el-tab-pane>
                    </el-tabs>
                    <!-- 审批历史表格 -->
                    <el-table
                        :data="table_history"  class='mt12'   
                        >
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <!-- 提交审批文件 -->
                                <el-form label-position="left" class="demo-table-expand"  v-if='props.row.name.indexOf("申请")!=-1'>
                                    <el-form-item label="申请概述">
                                        <span  v-if='props.row.reqDescription!=""'>{{ props.row.reqDescription }}</span>
                                        <span  v-else>暂无</span>
                                    </el-form-item>
                                    <el-form-item label="发起审批文件"  >
                                        <el-table
                                          :data="props.row.projectReqFileVOList"  class='mt12 '  style="width: 100%"   border   
                                          >
                                            <el-table-column  prop="name" label="文件名称"  align='center'></el-table-column>
                                            <el-table-column   label="操作" align='center'  width='220'>
                                                <template v-slot="list">
                                                    <el-button  type="primary" size="mini" round @click="checkWord(list.row)">预览</el-button>
                                                    <el-button  type="primary" size="mini" round @click="downloadFile(list.row.fileCode)">下载</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-form-item>
                                </el-form>
                                <!-- 审批意见文件 -->
                                <el-form label-position="left" class="demo-table-expand"  v-if='props.row.name.indexOf("审批")!=-1'>
                                    <el-form-item label="审批意见文件"  >
                                      <el-table
                                      :data="props.row.fileList"  class='mt12 '  style="width: 100%"   border  v-if='props.row.fileList'  
                                      >
                                          <el-table-column  prop="name" label="文件名称"  align='center'></el-table-column>
                                          <el-table-column   label="操作" align='center'  width='220'>
                                                <template v-slot="list">
                                                        <el-button  type="primary" size="mini" round @click="checkWord(list.row)">预览</el-button>
                                                        <el-button  type="primary" size="mini" round @click="downloadFile(list.row.code)">下载</el-button>
                                                </template>
                                          </el-table-column>
                                      </el-table>
                                      <span   v-else>暂无</span>
                                    </el-form-item>
                                    <el-form-item label="审批人电子签名" label-width='110px' >
                                          <img  v-if='props.row.signatureImgCode!=null'  :src='sign_img+picUrl(props.row.signatureImgCode)' alt='电子签名图' class='w100  signature_img'/>
                                          <span  v-else>暂无</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="assigneeUserName" label="审批发起人"  align='center'>
                            <template slot-scope="scope">
                                <span  v-if='scope.row.name.indexOf("申请")!=-1'>{{scope.row.assigneeUserName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="name" label="操作"  align='center'></el-table-column>
                        <el-table-column  prop="createTime" label="发起时间"  align='center'>
                            <template slot-scope="scope">
                                <span  v-if='scope.row.name.indexOf("申请")!=-1'> {{scope.row.endTime | formatDate}}</span>
                                <span  v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="operation" label="审批结果"  align='center'>
                            <template slot-scope="scope">
                                <div  v-if='scope.row.name.indexOf("审批")!=-1'>
                                    <div  v-if=' scope.row.operation == "审批未通过" '  class="color-red"><i class="el-icon-warning-outline  color-red" ></i>不通过</div>
                                     <div  v-else  class='color-success'><i class="el-icon-circle-check  color-success" ></i>通过</div>
                                </div>
                                <span  v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="opinion" label="审批意见"  align='center'  width='350'>
                            <template slot-scope="scope">
                                <span  class='text-left  inline-block'>{{scope.row.opinion}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="assigneeUserName" label="审批人"  align='center'>
                            <template slot-scope="scope">
                                <span  v-if='scope.row.name.indexOf("审批")!=-1'>{{scope.row.assigneeUserName}}</span>
                                <span  v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="endTime" label="审批时间"  align='center'>
                            <template slot-scope="scope">
                                <span  v-if='scope.row.name.indexOf("审批")!=-1'>{{scope.row.endTime | formatDate}}</span>
                                <span  v-else>--</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <!-- 审批操作 审批 & 指派 -->
            <el-row  v-if = '(formdata.status ==1  || formdata.status ==3  || formdata.status == 5 ) && isCheck == "false" '  class='dialog-footer mt42'>
                <el-button   v-if='permit.approval' type='primary'    round   @click="handleRequest(type,formdata.status,formdata.code)">审批</el-button>
                <el-button   v-if='permit.appoint'  type='primary'    round   @click="handlePoint()">指派</el-button>
                <span  v-if='!permit.approval && !permit.appoint'  class="color-red  ft14">当前用户无审批权限</span>
            </el-row>
            <!-- components 审批 -->
            <HandleRequest  ref='handleRequest'  v-on:save-finished='FinishedExa()'></HandleRequest>
            <!-- components 指派 -->
            <!-- 新增 x相关人员  type 审批类型  status 审批状态  from 从哪个入口进入-->
            <relatedUserEdit ref='relatedUser' v-on:save-finished='FinishedExa()'  :type='type'  :status='formdata.status'  :from='Exa_detail'> </relatedUserEdit>
        </el-col>
    </el-row>
</template>

<script>
/*interface*/
import  { detailExamine,getExaHistory,getExaHistory_product }  from '@/api/examine/index' 
import  { getpdfcode }  from '@/api/common/file'/*pdf文件预览*/
/*components*/
import  HandleRequest  from  '@/components/examine/HandleRequest'
import  relatedUserEdit  from '@/components/professional_work/project/relatedUserEdit'
/*state*/
import { mapGetters } from 'vuex'
//图片放大缩小插件
import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';

export default {
    name: 'detail_unstart',
    data(){
        return {
            /*static*/
            /*当前用户允许权限*/
            permit:{
                approval:false,//审批
                appoint:false,//指派
            },
            search:{
                type:'1',
                status:'1',
            },
            //搜索查询- 类型选择
            types:[
              {value: '1',label: '类型'}, 
              {value: '2',label: '入会'}, 
              {value: '3',label: '会员类型变更'}, 
              {value: '4',label: '银行账户变更'}, 
              {value: '5',label: '电子签章变更'}, 
            ],
            //搜索查询- 状态选择
            status:[
              {value: '1',label: '状态'}, 
              {value: '2',label: '审批中'}, 
              {value: '3',label: '通过'}, 
              {value: '4',label: '未通过'}, 
            ],

            /*active*/
            current_code:'',//审批code 获得审批详情
            type:null,//申请类型  1 立项申请 2.过会
            isCheck:'',//是查看权限，还是审批权限

            formdata:{},
            history_file:[],//所有提审时提交的文件
            imgsrc:process.env.BASE_API+'/op/fileupload/download_workflow_img?fileCode=',//返回流程图
            table_history:[],//审批历史
            pro_setup_data:{},//历史 立项
            pro_LiftComunty_data:{},
            pro_discussion_data:{},
            pro_issue_data:{},
            hisdata:{},//当前历史data 
            activeName:'first',//历史当前选中tab
            prjCode:'',//当前的项目code
            prdCode:'',//当前的产品code
            sign_img:'download_file?fileCode=',//电子签名图,需要token
            
            Exa_detail:'Exa_detail',//相关人员进入入口 ，与另一个项目添加相关人员公用
            submitSuccess:false,//新增成功 编辑成功 =>清除缓存；取消编辑 返回上一页 =>仍然保持原页面
        }
    },
    created(){
        this.current_code = this.$route.query.code
        this.type = String(this.$route.query.type)
        
        if(this.$route.query.isCheck == 'true'){
            this.isCheck = 'true'
        }
        else{
            this.isCheck = 'false'
        }
        this.pageInit(this.current_code)
        this.jurisdiction()//初始化按钮权限操作
    },
    methods:{
        /*初始化 页面 操作权限 S*/
        /*获得该申请详情*/
        async pageInit(code){
            let url ='';
            let that =this
            //根据该审批类型 请求审批详情  tab-active在这里确定
            if(this.type == 1){
                url='/op/project_req/get_project_req'//立项
                this.activeName = 'first'
                // this.prjCode = code
            }
            if(this.type == 2){
                url='/op/project_meeting_req/get_project_meeting_req'//获取指定的项目过会申请
                this.activeName = 'second'
                // this.prjCode = code
            }
            if(this.type == 3){
                url='/op/product_agreement_stamp_req/get_product_agreement_stamp_req'//获取指定的产品协议用印申请
                this.activeName = 'third'
            }
            if(this.type == 4){
                url='/op/product_release_req/get_product_release_req'//获取指定的产品发行申请
                this.activeName = 'fourth'
            }       
            // console.log(code)
            await detailExamine(code,url).then(res=>{
                if(res.data.flag == true){
                    /*申请信息回填*/
                    this.formdata = {}
                    this.formdata = res.data.data;
                    //返回流程图
                    this.imgsrc+=this.formdata.processDiagramCode
                    //获得prjCode prdCode 为了获得历史记录
                    this.prjCode = res.data.data.prjCode
                    this.prdCode = res.data.data.prdCode
                }
            })
            .catch(error=>{
              
            })
            // 获得项目历史记录 获得两个类型的审批历史data，根据当前审批类型确定具体哪个，显示当前历史表格，审批文件
            await getExaHistory(this.prjCode).then(res=>{
                if(res.data.flag == true){
                    this.pro_setup_data = res.data.data.projectReqVO
                    this.pro_LiftComunty_data = res.data.data.projectMeetingReqVO

                    if(this.type == 1){
                        this.hisdata = this.pro_setup_data
                    }
                    if(this.type == 2 ){
                        this.hisdata = this.pro_LiftComunty_data
                    }
                    /*当前流程审批历史*/
                    this.table_history = this.hisdata.reqHis
                    /*当前以及所有之前提审的文件*/
                    this.history_file = this.hisdata.reqFileList
                }
            })
            .catch(error=>{
              
            })

             /*type >= 3 获得产品审批历史*/
            if(this.type > 2){
                await getExaHistory_product(this.prdCode).then(res=>{
                  if(res.data.flag == true){
                        this.pro_discussion_data = res.data.data.productAgreementStampReqVO
                        this.pro_issue_data = res.data.data.productReleaseReqVO

                        if(this.type == 3){
                            this.hisdata = this.pro_discussion_data
                        }
                        if(this.type == 4 ){
                          this.hisdata = this.pro_issue_data
                        }
                        /*当前流程审批历史*/
                        this.table_history = this.hisdata.reqHis
                        /*当前以及所有之前提审的文件*/
                        this.history_file = this.hisdata.reqFileList
                  }
                })
                .catch(error=>{
              
                })
            }
        },
        //初始化按钮权限操作
        jurisdiction(){
            this.permit.approval = this.button_limit.find(item => {
                return item.name === "审批" &&  item.parentId == 30100
            })
            this.permit.appoint = this.button_limit.find(item => {
                return item.name === "指派"
            })
        },
        /*初始化 页面 操作权限 E*/

        // 页面操作 S
        /*历史tab切换操作*/
        handleClick(tab, event) {
            if(tab.name == 'first'){
                this.hisdata = this.pro_setup_data
            }
            if(tab.name == 'second' ){
                this.hisdata = this.pro_LiftComunty_data
            }
            if(tab.name == 'third'){
                this.hisdata = this.pro_discussion_data
            }
            if(tab.name == 'fourth'){
                this.hisdata = this.pro_issue_data
            }
            /*当前流程审批历史*/
            this.table_history = this.hisdata.reqHis
            /*当前以及所有之前提审的文件*/
            this.history_file = this.hisdata.reqFileList
        },
        /*审批操作*/
        handleRequest(type,status,code){
            this.$refs.handleRequest.$emit('openDialog',type,status,code)
        },
        FinishedExa(){
            this.submitSuccess = true
        },
        //指派
        handlePoint(){
            this.$refs.relatedUser.$emit('openDialog',this.current_code)
        },
        // 页面操作 E
        
        /*表格操作 S*/
        
        checkWord(row){
            // getpdfcode(code)
            // console.log(row)
            let pdfStr = row.name.search(/pdf/ig)
            let code = row.fileCode ? row.fileCode : row.code
                  
            if(pdfStr !=-1){
                /*pdf文档*/
                window.open('download_file?fileCode='+code+'&token='+sessionStorage.getItem('tokenId')+'&isRead=1')
            }
            else {
                //doc文档
                getpdfcode(code)
            }
            
        }
        /*表格操作 E*/
    },
    components:{
        HandleRequest,
        relatedUserEdit
    },
    mounted(){
        // View an image
        const viewer = new Viewer(document.getElementById('image'), {
          inline: false,
          'button':false, //右上角按钮
          "navbar": false, //底部缩略图
          "title": true, //当前图片标题
          "toolbar": false, //底部工具栏
          "tooltip": true, //显示缩放百分比
          "movable": true, //是否可以移动
          "zoomable": true, //是否可以缩放
          "rotatable": false, //是否可旋转
          "scalable": false, //是否可翻转
          "transition": true, //使用 CSS3 过度
          "fullscreen": true, //播放时是否全屏
          "keyboard": true, //是否支持键盘
          viewed() {
            viewer.zoomTo(1);
          },
        });
    },
    computed:{
      ...mapGetters(['button_limit']),
      picUrl(img_latter){
          let tokenId = sessionStorage.getItem('tokenId')
          return function(value) {
            return value+'&token='+tokenId
          }
        }
    },
    watch:{
        //监听路由变化，点击查看我的消息进入
        '$route' (to, from) {
            this.current_code = to.query.code
            this.type = String(to.query.type)
            
            if(to.query.isCheck == 'true'){
                this.isCheck = 'true'
            }
            else{
                this.isCheck = 'false'
            }
            this.imgsrc = process.env.BASE_API+'/op/fileupload/download_workflow_img?fileCode='//返回流程图
            this.pageInit(this.current_code)
        }
    },
    beforeRouteLeave(to,from,next){
        /*提交时不需缓存*/
        from.meta.modifyCacheRoute = this.submitSuccess == true ? true :false
        next()
    }
}
</script>

<style>
.viewer-canvas > img{background: #fff;}

</style>
